<template>
    <button :class="containerClasses" :disabled="disabled" :loading="loading" hover-class="hover-btn" @click="onClick">
        <slot></slot>
    </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    type: {
        type: String,
        default: 'primary-400',
    },
    color: {
        type: String,
        default: 'text-white',
    },
    size: {
        type: String,
        default: 'normal',
    },
    line: {
        type: Boolean,
        default: false,
    },
    loading: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
})

const emits = defineEmits(['click'])
function onClick(params) {
    emits('click', params)
}

const containerClasses = computed(() => {
    const baseClasses = ['btn', `${props.size}`]

    if (props.line) {
        baseClasses.push(`border-color-${props.type}`)
        baseClasses.push(`text-${props.type}`)
    } else {
        baseClasses.push(`bg-${props.type}`)
        baseClasses.push(`${props.color}`)
    }

    return baseClasses
})
</script>

<script>
export default {
    options: {
        styleIsolation: 'shared', // 解除样式隔离
        virtualHost: true,
    },
}
</script>

<style lang="scss" scoped>
.btn {
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 0rpx;
    font-size: 28rpx;
    line-height: 1.4;
    padding: 0;

    &::after {
        border-color: transparent;
        border-radius: 0px;
    }

    &.small {
        font-size: 24rpx;
        padding: 0 24rpx;
        height: 56rpx;
        line-height: 56rpx;
    }
    &.normal {
        font-size: 28rpx;
        padding: 0 32rpx;
        height: 72rpx;
        line-height: 72rpx;
    }

    &.line {
        border: 1px solid;
        color: #fff;
        background-color: transparent;
        height: 72rpx;
        line-height: 70rpx;
        padding: 0 32rpx;
    }

    /* 添加激活状态下的transform */
    &:active {
        transform: translateY(1px); /* 向下移动1像素 */
    }
    /* 为了兼容微信小程序，可以定义一个类 */
    &.hover-btn {
        transform: translateY(1px);
    }
}
</style>
